<!DOCTYPE html>
<html class="x-admin-sm">
<head>
  <meta charset="UTF-8">
  <title>{$list.webtitle}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  {load href="__XADMIN__/css/font.css" /}
  {load href="__XADMIN__/css/xadmin.css" /}
  {load href="__XADMIN__/js/jquery.min.js" /}
  {load href="__XADMIN__/lib/layui/layui.js" /}
  {load href="__XADMIN__/js/xadmin.js" /}
  {load href="__XADMIN__/js/cookie.js" /}
  {load href="__XADMIN__/js/md5.min.js" /}
  {load href="__STATIC__/echarts/echarts.js" /}
  <title>{$list.webtitle}</title>
</head>
<body>
  <div class="x-body">
    <div class="layui-colla-item">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
          <fieldset class="layui-elem-field" style="height:350px">
            <legend>成绩列表</legend>
            <table class="layui-table" lay-size="lg">
              <colgroup>
                <col style="width: 10px;">
                <col>
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>学科</th>
                  <th>得分</th>
                  <th>得分率</th>
                </tr>
              </thead>
              <tbody>
                {present name="list.cj"}
                  {volist name="list.cj" id="vo"}
                    <tr>
                      <td>{$vo.title}</td>
                      <td>{$vo.defen}</td>
                      <td>{$vo.defenlv}</td>
                    </tr>
                  {/volist}
                {else /}
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                {/present}
              </tbody>
            </table>
          </fieldset>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
          <fieldset class="layui-elem-field" style="height:350px">
            <legend>得分率</legend>
            {present name="list.cj"}
              {volist name="list.cj" id="vo"}
                <div class="layui-form-item" style="margin-top: 15px;">
                  <label class="layui-form-label">
                    {$vo.title}
                  </label>
                  <div class="layui-input-block">
                    <div class="layui-progress layui-progress-big" lay-showPercent="true">
                      <div class="layui-progress-bar {$vo.color}" lay-percent="{$vo.defenlv}%">
                      </div>
                    </div>
                  </div>
                </div>
              {/volist}
            {/present}
          </fieldset>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
          <fieldset class="layui-elem-field" style="height:350px">
            <legend>雷达图</legend>
            <div id="leida" style="width:100%; height:400px;"></div>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">

  //config的设置是全局的
  layui.config({
      base: "__XADMIN__/js/" //假设这是你存放拓展模块的根目录
    });

  layui.use('element', function(){
    var element = layui.element;
  });

  getLeiDa("{$list.id}");

  // 条形统计图--平均分
  function getLeiDa(kaohao_id){
    var url = '/renshi/studentcj/chengjileida';
    var title = '学科成绩雷达图';
    var val = {
      kaohao_id: kaohao_id
    };
    createLeiDa(url,val,title);
  }



  /**
  * 异步获取图表中的数据
  *
  * @access public
  * @param id 要添加数据的div
  * @param url 异步地址
  * @param val 异步时携带的参数
  * @param val 图表标题
  * @return array 返回类型
  */
  function createLeiDa(url, val, title)
  {
    var myLeiDa = echarts.init(document.getElementById('leida'));
    $.post(url, val).done(function (data) {
      myLeiDa.setOption({
        title: {
          text:'',
        },
        tooltip: {},
        legend: {
          data: data.legend
        },
        toolbox: {
          id:'leida',
          show:true,
          orient:'horizontal',
          showTitle:true,
          feature: {
            restore: { //重置
              show: true
            },
            saveAsImage: { //保存文件
              show: true
            },
          },
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: data.indicator
        },
        series: data.series
      })
    });
  }

</script>
</html>
